<template>
  <div class="docs">
    <div class="main" ref="main">
      <div class="header">
        <div class="title">
          <h1>{{id}}</h1>
        </div>
        <div class="meta-container">
          <div>
            <n-icon size="15">
              <game-icon />
            </n-icon>
            Posted on <span style="border-bottom: 1px dashed #999;">2022-07-05</span>
          </div>
          <n-divider vertical></n-divider>
          <div>
            <n-icon size="15">
              <game-icon />
            </n-icon>
            Disqus:
          </div>
        </div>
        <n-icon @click="toEdit" class="edit-icon" size="40">
          <game-icon></game-icon>
        </n-icon>
      </div>
      <div class="docs-body">
        <h2 id="🌀-External-Changes"><a href="#🌀-External-Changes" class="headerlink"></a>🌀 External Changes</h2>
        <ul>
          <li>Update actions/setup-python action to v4 (<a href="https://github.com/next-theme/hexo-theme-next/pull/531"
              target="_blank">#531<i class="fa fa-external-link-alt"></i></a>)</li>
          <li>Update dependency eslint to v8.19.0 (<a href="https://github.com/next-theme/hexo-theme-next/pull/530"
              target="_blank">#530<i class="fa fa-external-link-alt"></i></a>)</li>
        </ul>
        <hr>
        <p>For full changes, see the <a href="javascript:;">comparison between
            v8.12.1 and v8.12.2<i class="fa fa-external-link-alt"></i></a></p>
        <p><a href="javascript:;">Detailed changes for
            NexT v8.12.2<i class="fa fa-external-link-alt"></i></a></p>
      </div>
      <div class="docs-footer">
        <div class="docs-nav">
          <div class="docs-nav-item">
            <a @click="getDetail('NexT 8.12.1 Released')">
              <i class="fa fa-chevron-left"></i> NexT 8.12.1 Released
            </a>
          </div>
          <div class="docs-nav-item">
            <a @click="getDetail('NexT 8.12.3 Released')">
              NexT 8.12.3 Released 
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onMounted, nextTick } from 'vue'
import {
  GameControllerOutline as GameIcon,
  LaptopOutline as WorkIcon,
  LogOutOutline as HomeIcon
} from '@vicons/ionicons5'
import { NDivider, NIcon } from 'naive-ui'
import "animate.css";
import useStore from '../store'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'


const store = useStore()


const route = useRoute()
const router = useRouter()


let id = ref(route?.params?.id)

let main = ref(null)


const getDetail = (id: string) => {
  router.push({name: `detail`, params: {id}})
}


const toEdit = () => { 
  store.getEle(main?.value?.innerHTML)
  router.push({ path: '/edit' })
}

</script>

<style lang="scss" scoped>
.docs {
  .main {
    background-color: var(--theme-content-color);
    padding: 40px;

    .header {
      text-align: center;
      position: relative;

      .title {
        h1 {
          font-weight: normal !important;
        }
      }

      .meta-container {
        display: flex;
        align-items: center;
        justify-content: center;

        div {
          display: flex;
          align-items: center;
        }

        i {
          margin-right: 3px;
        }

        ::v-deep .n-divider.n-divider--vertical {
          background-color: #000;
        }
      }

      .edit-icon {
        position: absolute;
        right: 0;
        top: 0;
        cursor: pointer;
        transition: all .3s;
        &:hover {
            color: #fc6423,
        }
      }
    }

    .docs-body {
      font-size: 1.125em;
      line-height: 2;

      h2 {
        border-bottom: 1px solid #000;
        font-size: 1.375em;
        margin: 40px 0 20px;
      }

      ul {
        padding-left: 20px;

        li {
          list-style: inside;
        }
      }

      hr {
        margin: 40px 0;
      }

      p {
        margin-bottom: 20px;

        a {
          border-bottom: 1px solid #999;
        }
      }
    }

    .docs-footer {
      .docs-nav {
        margin-top: 10px;
        padding-top: 10px;
        display: flex;
        border-top: 1px solid #000;
        justify-content: space-between;
      }
    }
  }
}

a {
  &:hover {
    opacity: 0.6;
  }
}
</style>